<template>
	<div class="all">
		<div v-if="tixianma">
			<div class="li" style="position: relative;">
				<div style=" color: #2D3038; font-size: 0.28rem; margin-bottom: 0.2rem;">可提现金额（元）</div>
				<div style=" font-size: 0.56rem; color: #2D3038;" v-if="yue == 0">0.00</div>
				<div style=" font-size: 0.56rem; color: #2D3038;" v-if="yue != 0">{{yue | qu0}}</div>
				<div class="tixian" @click="tixianma = !tixianma">提现</div>
			</div>
			<div class="li">
				<div class="flex flexb">
					<div style="color: #2D3038; font-size: 0.28rem;" v-if="wodedashang != 0">我的打赏：{{wodedashang | qu0}}元</div>
					<div style="color: #2D3038; font-size: 0.28rem;" v-if="wodetixian != 0">累计提现：{{wodetixian | qu0}}元</div>
					<div style="color: #2D3038; font-size: 0.28rem;" v-if="wodedashang == 0">我的打赏：0.00元</div>
					<div style="color: #2D3038; font-size: 0.28rem;" v-if="wodetixian == 0">累计提现：0.00元</div>
				</div>
			</div>
		</div>
		<div v-if="!tixianma">
			<div class="li" style="position: relative;">
				<div style=" color: #2D3038; font-size: 0.28rem; margin-bottom: 0.2rem;">提现金额（元）</div>
				<div class="flex" style=" font-size: 0.56rem; margin-bottom: 0.2rem;">
					￥
					<van-field v-model="qian" type="number" placeholder="请输入提现金额" />
				</div>
				<div style=" color: #2D3038; font-size: 0.28rem; margin-bottom: 0.2rem;"  v-if="yue == 0">可提现金额：0.00元</div>
				<div style=" color: #2D3038; font-size: 0.28rem; margin-bottom: 0.2rem;"  v-if="yue != 0">可提现金额：{{yue | qu0}}元</div>
				<div class="tixian" style="top: 1rem;" v-if="caozuo" @click="tixian">申请提现</div>
				<div class="tixian" style="top: 1rem;" v-if="!caozuo" >操作中..</div>
			</div>
			<div class="li">
				<div class="flex flexb">
					<div style="color: #2D3038; font-size: 0.28rem;">提现至：</div>
					<div style="color: #2D3038; font-size: 0.28rem;">微信零钱 ></div>
				</div>
			</div>
		</div>
		<div class="li">
			<div style="color: #2D3038; font-size: 0.28rem; margin-bottom: 0.2rem;">收支明细</div>
			<div class="flex" style=" border-bottom: 1px #eaeaea solid; padding-bottom: 0.3rem;">
				<div :class="tag == 0 ? 'act type':'type'" @click="tagchange(0)">全部</div>
				<div :class="tag == 1 ? 'act type':'type'" @click="tagchange(1)">已入账</div>
				<div :class="tag == 2 ? 'act type':'type'" @click="tagchange(2)">未完成</div>
				<div :class="tag == 3 ? 'act type':'type'" @click="tagchange(3)">已提现</div>
			</div>
			<div class="list">
				<div class="lli" v-for="item in list" :key="item.id">
					<div class="flex flexb" v-if="tag != 3">
						<div style="font-size: 0.25rem;">打赏</div>
						<div style="font-size: 0.25rem;">+{{item.total}}元</div>
					</div>
					<div class="flex flexb" v-if="tag == 3">
						<div style="font-size: 0.25rem;">提现</div>
						<div style="font-size: 0.25rem;">-{{item.total}}元</div>
					</div>
					<div class="flex flexb">
						<div>{{item.created_at}}</div>
						<div v-if="item.status == 0">提现中</div>
						<div v-if="item.status == 1">已提现</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'tixian',
		data() {
			return {
				tag:0,
				tixianma:true,
				list:"",
				yue:"",
				qian:"",
				wodetixian:"",
				wodedashang:"",
				caozuo:true
			}
		},
		created() {
			this.getyue()
			this.getlist()
		},
		methods: {
			tixian:function(){
				if(this.qian > this.yue){
					this.$toast('超过最大提现额度！');
					return false
				}
				this.caozuo = false
				axios.post(this.urls+'/photographer/draw_cash',{total:this.qian}).then((response) => {
					if (response.data.msg.code == 0) {
						
						this.getyue()
						this.getlist()
						this.$toast('已申请提现');
						this.caozuo = true
					}else{
						this.$toast(response.data.msg.info);
						this.caozuo = true
					}
				})
			},

			getyue:function(){
				axios.get(this.urls+'/photographer/reward').then((response) => {
					if (response.data.msg.code == 0) {
						this.yue = response.data.data.reword_me
						this.wodetixian = response.data.data.draw_cash
						this.wodedashang = response.data.data.reword
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			tagchange:function(id){
				this.tag = id
				if(id != 3){
					this.getlist()
				}else{
					this.getlist2()
				}
				
			},
			getlist:function() {
				axios.get(this.urls+'/photographer/reward_list?page=1&page_size=1000&tag='+this.tag).then((response) => {
					if (response.data.msg.code == 0) {
						this.list = response.data.data.data
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			getlist2:function() {
				axios.get(this.urls+'/photographer/draw_cash_list?page=1&page_size=1000&tag=0').then((response) => {
					if (response.data.msg.code == 0) {
						this.list = response.data.data.data
					}else{
						this.$toast(response.data.msg.info);
					}
				})
			},
			//登陆
			login: function() {
				//测试登录
				this.axios.post(this.urls+`/web/user/login?username=admin&password=123456`)
					.then(response => {
						if (response.data.success == true) {
							this.person = response.data.result.userInfo
							this.$router.push('/')
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
				
				//微信登录
				// this.axios.post(this.urls+`/mobile/api/wechatLogin?code=`+this.$route.query.code)
				// 	.then(response => {
				// 		if (response.data.success == true) {
				// 			this.person = response.data.result.userInfo
				// 			localStorage.setItem('token', response.data.result.token)
				// 			this.$router.push('/')
				// 		} else {
				// 			this.$message.error(response.data.message);
				// 		}
				// 	})
					
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		.li{background: #FFFFFF; padding:0.3rem; border-radius: 0.1rem; box-shadow: 2px 2px 5px #999; margin-bottom: 0.3rem;}
		.act{ background: #FFE5E0 !important; color:#FE6446 !important;}
		.type{ background: #EAECF2; color:#6F737E; font-size: 0.2rem; width: 1.1rem; height: 0.5rem; margin-right: 0.2rem; border-radius: 0.1rem; display: flex; align-items: center; justify-content: center;}
		.tixian{position: absolute; top: 0.3rem; right: 0.2rem; font-size: 0.28rem; background: #FE6446; height: 0.6rem; display: flex; align-items: center; width: 1.8rem; color:#FFFFFF; justify-content: center; border-radius: 0.3rem;}
		.lli{ border-bottom: 1px #eaeaea solid; padding-bottom: 0.2rem; line-height: 0.4rem; margin-top: .2rem;}
	}
</style>
